﻿@model Zatify.WebUI.Models.UserProfileGeneralInfoViewModel
@{
    ViewBag.Title = "Profile";
    ViewBag.ContentTitle = "Profile";
    Layout = "~/Views/Shared/_ContentLayout.cshtml";
}
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/uploadify/uploadify.css")" />
<style type="text/css">
        .myClass
        {
            background: url('@Url.Content("~/Content/zatify/images/blue_btn_bg.jpg")') repeat-x scroll 0 0 transparent;
            border: 2px;
            border-radius: 6px 6px 6px 6px;
        }
        .myClass:hover
        {
            background: url('@Url.Content("~/Content/zatify/images/blue_btn_bg.jpg")') repeat-x scroll 0 0 transparent;
        }
        #profileImage
        {
            padding: 2px;
            border: 1px solid #C6C6C6;
        }

        .upl
        {
            height: 151px;
            left: 0;
            opacity: 0;
            position: absolute;
            top: 0;
            visibility: visible;
            width: 151px;
        }
    </style>
@section Scripts
{
    <script type="text/javascript" src="@Url.Content("~/Scripts/uploadify/jquery.uploadify.min.js")"></script>
    <script type="text/javascript">

        function removeIframe(iframeId) {

            iframeId.parentNode.removeChild(iframeId);
        }

        function fileUpload(formID, action_url, div_id) {

            var form = document.getElementById(formID);

            // Create the iframe...
            var iframe = document.createElement("iframe");
            iframe.setAttribute("id", "upload_iframe");
            iframe.setAttribute("name", "upload_iframe");
            iframe.setAttribute("width", "0");
            iframe.setAttribute("height", "0");
            iframe.setAttribute("border", "0");
            iframe.setAttribute("style", "width: 0; height: 0; border: none;");

            // Add to document...
            form.parentNode.appendChild(iframe);
            window.frames['upload_iframe'].name = "upload_iframe";

            iframeId = document.getElementById("upload_iframe");

            // Add event...
            var eventHandler = function () {

                if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
                else iframeId.removeEventListener("load", eventHandler, false);

                // Message from server...
                if (iframeId.contentDocument) {
                    content = iframeId.contentDocument.body.innerHTML;
                } else if (iframeId.contentWindow) {
                    content = iframeId.contentWindow.document.body.innerHTML;
                } else if (iframeId.document) {
                    content = iframeId.document.body.innerHTML;
                }

                $("#imagePath").val(content);
                document.getElementById(div_id).innerHTML = "";
                //document.getElementById(div_id).innerHTML = content;
                document.getElementById("profileImage").setAttribute("src", content)

                // Del the iframe...
                //setTimeout(removeIframe(iframeId), 250);
                //setTimeout('removeIframe(iframeId)', 250);
            }

            if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
            if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

            // Set properties of form...
            form.setAttribute("target", "upload_iframe");
            form.setAttribute("action", action_url);
            form.setAttribute("method", "post");
            form.setAttribute("enctype", "multipart/form-data");
            form.setAttribute("encoding", "multipart/form-data");

            // Submit the form...
            form.submit();

            document.getElementById(div_id).innerHTML = "Uploading...";
        }

        $(document).ready(function () {

            $('#Password').val('@Model.Password');
            $('#ConfirmPassword').val('@Model.Password');

            $("#datafile").change(function () {

                if ($(this).val() && $(this).val().length > 0) {
                    fileUpload('imageFileForm', '@Url.Action("UploadTempImage")', 'upload');
                }

                return false;
            });
        });
    </script>
}
<div class="user_registration_area">
    <div class="login_fillbox">
        <div class="upload_pic profile_upload_pic">
            <div class="upload_pic">
                @using (Html.BeginForm("IndvPost", "Individual", FormMethod.Post, new { id = "imageFileForm", style = "position: relative;" }))
                {
                    if (Model.Picture == null)
                    {
                    <img id="profileImage" src="@Url.Content("~/Content/zatify/images/upload_picture.jpg")" alt="" style="height: 151; width: 151px; margin-bottom: 5px; border: 1px solid #C6C6C6; padding: 2px;" />
                    }
                    else
                    {
                    <img id="profileImage" src="@Url.Action("GetUserPhoto", "UserProfile")" alt="" style="height: 151; width: 151px; margin-bottom: 5px; border: 1px solid #C6C6C6; padding: 2px;" />
                    }
                    <div id="upload">
                    </div>
                    <input class="upl" type="file" id="datafile" name="datafile" style="visibility: visible" />
                }
            </div>
        </div>
        @using (Html.BeginForm("GeneralInfo", "UserProfile", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            @Html.Hidden("imagePath")
            <div class="user_reg_line">
                <label for="username" class="label_text">
                    Username:</label>
                @Html.Hidden("UserId", Model.UserId)
                <div class="inputbox_text profile_inputbox_text">@Model.UserId</div>
            </div>
            <div class="user_reg_line">
                <label for="password" class="label_text">
                    Password<span>:</span></label>
                @Html.Password("Password", Model.Password, new { @class = "inputbox_text inputbox_bg_img40" })
            </div>
            <div class="user_reg_line">
                <label for="confirmpapssword" class="label_text">
                    Confirm<span>:</span></label>
                @Html.Password("ConfirmPassword", Model.ConfirmPassword, new { @class = "inputbox_text inputbox_bg_img40" })
            </div>
            <div class="user_reg_line">
                <label for="ZipCode" class="label_text">
                    Zip Code<span>:</span></label>
                @Html.TextBox("ZipCode", Model.ZipCode, new { @class = "inputbox_text inputbox_bg_img40" })
            </div>
            <div class="user_reg_line">
                <label for="email" class="label_text">
                    Email<span>:</span></label>
                @Html.TextBox("Email", Model.Email, new
           {
               @class = "inputbox_text inputbox_bg_img40",
               name = "Optional (For Recover Password)",
               onblur = "if(this.value=='') this.value=this.title;",
               onfocus = "if(this.value==this.title) this.value='';",
               title = "Optional (For Recover Password)"
           })
            </div>
            <div class="user_reg_line">
                <label for="phone" class="label_text">
                    Phone<span>:</span></label>
                @*<input type="text" name="Optional (For Recover Password)" id="phone" onblur="if(this.value=='') this.value=this.title;"
                    onfocus="if(this.value==this.title) this.value='';" title="Optional (For Recover Password)"
                    value="Optional (For Recover Password)" class="inputbox_text inputbox_bg_img40">*@
                @Html.TextBox("Phone", Model.Phone, new { @class = "inputbox_text inputbox_bg_img40", placeholder = "Optional (For Recover Password)" })
            </div>
            <input type="submit" value="Save" class="blue_btn" style="margin-left: 150px;" />
            @Html.ValidationSummary()
        }
    </div>
    <div class="clearfix">
    </div>
</div>
